<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>点餐系统</title>
    <link rel='stylesheet' href='/css/style.css'/>
    <link rel='stylesheet' href='/Semantic-UI-2.0.2/semantic.min.css'/>
    <link rel="Shortcut Icon" href="/images/favicon.ico">
</head>
<body style="padding-top: 20px;">
<div class="ui grid container">
    <div class="sixteen wide column">
        <div class="ui top attached tabular menu">
            <a class="active item" data-tab="orders" onclick="load('orders','orders.html')">点餐</a>
            <a class="item" data-tab="second" onclick="load('second','http://www.w3school.com.cn/')">统计</a>
            <a class="item" data-tab="third" onclick="load('third','http://www.semantic-ui.cn/')">意见</a>
        </div>
        <div class="ui bottom attached active tab segment" data-tab="orders">First</div>
        <div class="ui bottom attached tab segment" data-tab="second">Second</div>
        <div class="ui bottom attached tab segment" data-tab="third">Third</div>
    </div>
</div>
</body>
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Semantic-UI-2.0.2/semantic.min.js"></script>
<script type="text/javascript">
    var load = function (target, url) {
        $('[data-tab]').removeClass("active");
        $('[data-tab=' + target + ']').addClass("active");
        $('div[data-tab=' + target + ']').load(url);
    }
    load('orders','orders.html');
</script>
</html>